<template>
  <div>

    <div class="page-header">
      <span class="a1">&nbsp;姓名：</span>
      <span><Input v-model="aa" placeholder="请输入姓名" clearable style="width: 200px"/></span>
      &nbsp;&nbsp;&nbsp; <span class="">身份证号：</span>
      <span><Input v-model="bb" placeholder="请输入身份证号" clearable style="width: 200px"/></span>
      &nbsp;&nbsp;&nbsp;<span class=""> <Button type="primary" class="chaxun" @click="chaxun()">查询</Button></span>
      &nbsp;&nbsp;&nbsp;<span class="">   <Button type="primary" class="tianjia" @click="tianjia()">添加</Button></span>
    </div>
    <div class="div2">
      <Row>
        <Col span="24" class="lyx-mb10">
          <Table border ref="selection" :columns="columns4" :data="data2">

            <template slot-scope="{ row }" slot="name">
              <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row }" slot="cz">
              <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">详情
              </Button>
              <!--<Button type="error" size="small" @click="remove(index)">删除</Button>-->

            </template>

          </Table>
        </Col>
      </Row>
    </div>
    <div class="fenye">
      <Row type="flex" justify="space-between" class="lyx-mb10">
        <Col span="24">
          <Page :total="40" show-total/>
        </Col>
      </Row>
    </div>
    <Modal v-model="user.show" title="个人信息" width="1008px" >
      <Form :model="user" label-position="right" :label-width="100">
        <div class="wk1">
          <div class="img1 b_top_left">
            <!--              <img class="img2" :src="nophoto">-->
            <img src="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1573449934000/1180158760.jpg" width="100%" height="100%">
          </div>
          <div class="w90 b_top_left td1">姓名</div>
          <div class="w165 b_top_left ti">
            <!-- {{userInfo.name}} -->
            <input class="input1" v-model="userInfo.name" type="text " readonly/>
          </div>
          <div class="w90 b_top_left td1">性别</div>
          <div class="w105 b_top_left ti">
            <!-- {{userInfo.sex}} -->
            <input class="input1" v-model="userInfo.sex" type="text " readonly/>
          </div>
          <div class="w90 b_top_left td1">民族</div>
          <div class="w135 b_bottom ti">
            <!-- {{userInfo.folk}} -->
            <input class="input1" style="width: 90%;" v-model="userInfo.folk" type="text " readonly />
          </div>
          <div class="w90 b_bottom_right td1">身份证号</div>
          <div class="w165 b_bottom_right ti">
            <input class="input1" style="width: 90%;" v-model="userInfo.idcard" type="text " readonly/>
          </div>
          <div class="w90 b_top_left td1">房屋属性</div>
          <div class="w105 b_top_left ti">
<!--            <select v-model="userInfo.house_condition" class="select1" style="width:90px;">-->
<!--              <option value="自有">自有</option>-->
<!--              <option value="租住">租住</option>-->
<!--            </select>-->
            <input class="input1" v-model="userInfo.house_condition" type="text " readonly/>
          </div>
          <div class="w90 b_bottom_right td1">居住情况</div>
          <div class="w135 b_bottom ti">
        <!--    <select v-model="userInfo.living_condition" class="select1" style="width:115px;">
              <option value="自住">自住</option>
              <option value="租住">租住</option>
              <option value="借住">借住</option>
              <option value="其他">其他</option>
            </select>-->
            <input class="input1" v-model="userInfo.living_condition" type="text " readonly style="width:115px;"/>
          </div>
          <div class="w90 b_bottom_right td1">住址</div>
          <div class="w585 b_bottom ti">
            <!-- {{userInfo.address}} -->
            <input class="input1" v-model="userInfo.address" type="text " readonly/>
          </div>
          <div class="w90 b_bottom_right td1">户籍地址</div>
          <div class="w585 b_bottom ti"><input class="input1" v-model="userInfo.domicile_address" type="text " readonly/>
          </div>
          <div class="w135 b_bottom_right td1">手机号码</div>
          <div class="w190 b_bottom_right ti"><input class="input1" v-model="userInfo.tel" type="text " readonly/></div>
          <div class="w105 b_bottom_right td1">现住地址</div>
          <div class="w395 b_bottom ti"><input class="input1" v-model="userInfo.present_address" type="text " readonly/>
          </div>
          <div class="w135 b_bottom_right td1">共同居住人员</div>
          <div class="w190 b_bottom_right ti">
            <!--<select v-model="userInfo.co_resident" class="select1" style="width:170px;">
              <option value="父母">父母</option>
              <option value="配偶">配偶</option>
              <option value="亲属">亲属</option>
              <option value="其他">其他</option>
              <option value="无">无</option>
            </select>-->
            <input class="input1" v-model="userInfo.co_resident" type="text " readonly/>
          </div>
          <div class="w105 b_bottom_right td1">银行卡收入情况</div>
          <div class="w115 b_bottom_right ti">
            <!--<select v-model="userInfo.personal_income" class="select1" style="width:85px;">
              <option value="5万以下">5万以下</option>
              <option value="5-10万">5-10万</option>
              <option value="10万以上">10万以上</option>
              <option value="保密">保密</option>
            </select>-->
            <input class="input1" v-model="userInfo.personal_income" type="text " readonly style="width:85px;" />
          </div>
          <div class="w95 b_bottom_right td1">工作单位</div>
          <div class="w170 b_bottom ti"><input class="input1" v-model="userInfo.work_unit" type="text " readonly/></div>
          <div class="w135 b_bottom_right td1">文化程度</div>
          <div class="w90 b_bottom_right ti">
          <!--  <select v-model="userInfo.education" class="select1" style="width:70px;">
              <option value="小学">小学</option>
              <option value="初中">初中</option>
              <option value="高中">高中</option>
              <option value="大学">大学</option>
              <option value="硕士研究生">硕士研究生</option>
              <option value="博士研究生">博士研究生</option>
              <option value="其他">其他</option>
            </select>-->
            <input class="input1" v-model="userInfo.education" type="text " readonly style="width:70px;" />
          </div>
          <div class="w100 b_bottom_right td1">婚姻状况</div>
          <div class="w65 b_bottom_right ti">
           <!-- <select v-model="userInfo.marriage" class="select1" style="width:55px;">
              <option value="未婚">未婚</option>
              <option value="已婚">已婚</option>
              <option value="离异">离异</option>
              <option value="丧偶">丧偶</option>
              <option value="再婚">再婚</option>
            </select>-->
            <input class="input1" v-model="userInfo.marriage" type="text " readonly style="width:55px;" />
          </div>
          <div class="w80 b_bottom_right td1">生育子女</div>
          <div class="w75 b_bottom_right ti">
           <!-- <select v-model="userInfo.child" class="select1" style="width:65px;">
              <option value="无">无</option>
              <option value="1个">1个</option>
              <option value="2个">2个</option>
              <option value="3个以上">3个以上</option>
            </select>-->
            <input class="input1" v-model="userInfo.child" type="text " readonly style="width:65px;" />
          </div>
          <div class="w95 b_bottom_right td1">政治面貌</div>
          <div class="w170 b_bottom ti">
            <!-- v-model="userInfo.political_outlook"-->
<!--            <select v-model="userInfo.political_outlook" class="select1" style="width:150px;">-->
<!--              <option value="群众">群众</option>-->
<!--              <option value="共产党员">共产党员</option>-->
<!--              <option value="共产主义青年团团员">共产主义青年团团员</option>-->
<!--              <option value="国民党革命委员会会员">国民党革命委员会会员</option>-->
<!--              <option value="民主同盟盟员">民主同盟盟员</option>-->
<!--              <option value="民主建国会会员">民主建国会会员</option>-->
<!--              <option value="民主促进会会员">民主促进会会员</option>-->
<!--              <option value="农工民主党党员">农工民主党党员</option>-->
<!--              <option value="致公党党员">致公党党员</option>-->
<!--              <option value="九三学社社员">九三学社社员</option>-->
<!--              <option value="台湾民主自治同盟盟员">台湾民主自治同盟盟员</option>-->
<!--              <option value="无党派民主人士">无党派民主人士</option>-->
<!--            </select>-->
            <input class="input1" v-model="userInfo.political_outlook" type="text " readonly style="width:150px;" />
          </div>
          <div class="w135 b_bottom_right td1">兵役情况</div>
          <div class="w90 b_bottom_right ti">
           <!-- <select v-model="userInfo.military" class="select1" style="width:70px;">
              <option value="是">是</option>
              <option value="否">否</option>
            </select>-->
            <input class="input1" v-model="userInfo.military" type="text " readonly style="width:70px;" />
          </div>
          <div class="w100 b_bottom_right td1">职业</div>
          <div class="w220 b_bottom ti" style="width: 485px">
<!--            <select v-model="userInfo.occupation" class="select1" style="width:465px;">-->
<!--              <option value="国家机关,党群组织">国家机关,党群组织,企业</option>-->
<!--              <option value="企业,事业单位负责人">企业,事业单位负责人</option>-->
<!--              <option value="专业技术人员">专业技术人员</option>-->
<!--              <option value=">办事人员和有关人员">办事人员和有关人员</option>-->
<!--              <option value="商业,服务业人员">商业,服务业人员</option>-->
<!--              <option value="农,林,牧,渔,水利业生产人员">农,林,牧,渔,水利业生产人员</option>-->
<!--              <option value="生产,运输设备操作及有关人员">生产,运输设备操作及有关人员</option>-->
<!--              <option value="军人">军人</option>-->
<!--              <option value="退休">退休</option>-->
<!--              <option value="学生">学生</option>-->
<!--              <option value="学龄前">学龄前</option>-->
<!--              <option value="其他从业人员">其他从业人员</option>-->
<!--              <option value="无业人员">无业人员</option>-->
<!--            </select>-->
            <input class="input1" v-model="userInfo.occupation" type="text " readonly style="width:465px;" />
          </div>
          <div class="w135 b_bottom_right td1">重点人群</div>
          <div class="w1701 ti" style="width: 675px">
           <!-- <select v-model="userInfo.zhongdian" class="select1" style="width:655px;">
              <option value="残疾人群">残疾人群</option>
              <option value="大众人群">大众人群</option>
            </select>-->
            <input class="input1" v-model="userInfo.zhongdian" type="text " readonly style="width:675px;" />
          </div>
          <div class="w135 b_bottom_right td1">小区</div>
          <div  class="w220 b_bottom_right ti">
           <!-- <select v-model="userInfo.qu" class="select1" style="width:200px;">
              &lt;!&ndash;                <option :value="obj.id" v-for="obj in smallarealist" v-bind:key="obj.id">{{obj.title}}</option>&ndash;&gt;
              <option value="西塔小区">西塔小区</option>
              <option value="恒大绿洲">恒大绿洲</option>
            </select>-->
            <input class="input1" v-model="userInfo.qu" type="text " readonly style="width:200px;" />
          </div>
          <div  class="w100 b_bottom_right td1">组</div>
          <div class="w90 b_bottom_right ti">
            <!--<select v-model="userInfo.zhu" class="select1" style="width:70px;">
              &lt;!&ndash;                <option :value="obj.id" v-for="obj in grouplist" v-bind:key="obj.id">{{obj.title}}</option>&ndash;&gt;
              <option value="2组">2组</option>
              <option value="3组">3组</option>
            </select>-->
            <input class="input1" v-model="userInfo.zhu" type="text " readonly style="width:70px;" />
          </div>
          <div class="w95 b_bottom_right td1">楼</div>
          <div class="w1701 ti">
          <!--  <select v-model="userInfo.lou" class="select1" style="width:150px;">
              &lt;!&ndash;                <option :value="obj.id" v-for="obj in downlist" v-bind:key="obj.id">{{obj.title}}</option>&ndash;&gt;
              <option value="4楼">4楼</option>
              <option value="5楼">5楼</option>
            </select>-->
            <input class="input1" v-model="userInfo.lou" type="text " readonly style="width:150px;" />
          </div>
          <div class="w135 b_right td1">单元</div>
          <div  class="w220 b_right ti">
<!--            <select v-model="userInfo.danyuan" class="select1" style="width:200px;">-->
<!--              &lt;!&ndash;   <option :value="obj.id" v-for="obj in unitlist" v-bind:key="obj.id">{{obj.title}}</option>&ndash;&gt;-->
<!--              <option value="6单元">6单元</option>-->
<!--              <option value="7单元">7单元</option>-->
<!--            </select>-->
            <input class="input1" v-model="userInfo.danyuan" type="text " readonly style="width:200px;" />
        </div>
          <div  class="w100 b_right td1" >层</div>
          <div class="w90 b_right ti">
<!--            <select v-model="userInfo.cheng" class="select1" style="width:70px;">-->
<!--              &lt;!&ndash;                <option :value="obj.id" v-for="obj in layerlist" v-bind:key="obj.id">{{obj.title}}</option>&ndash;&gt;-->
<!--              <option value="2层">2层</option>-->
<!--              <option value="3层">3层</option>-->
<!--            </select>-->
            <input class="input1" v-model="userInfo.cheng" type="text " readonly style="width:70px;" />
          </div>
          <div class="w95 b_right td1">户</div>
          <div class="w170 ti">
<!--            <select v-model="userInfo.hu" class="select1" style="width:150px;">-->
<!--              &lt;!&ndash;   <option :value="obj.id" v-for="obj in householdlist" v-bind:key="obj.id">{{obj.title}}</option>&ndash;&gt;-->
<!--              <option value="2户">2户</option>-->
<!--              <option value="3户">3户</option>-->
<!--            </select>-->
            <input class="input1" v-model="userInfo.hu" type="text " readonly style="width:150px;" />
          </div>
        </div>
        <br>
        <div class="div3">
          <P class="p1">备注：</P>
        </div>
        <br>
        <div class="div2">
          <textarea class="input3" v-model="userInfo.remarks" rows="5" readonly />
        </div>
      </Form>
      <div slot="footer">
        <!--  <Button type="text" size="large" @click="user.show=false">取消</Button>
          <Button type="primary" size="large" @click="saveUser">确定</Button>-->
        <Button type="primary" @click="ok2">确定</Button>
        <!--          <Button style="margin-left: 8px" @click="closeModal">取消</Button>-->
      </div>
    </Modal>
    <!--      /*********************************************************************************************************************************************/-->
    <Modal v-model="modal2" title="个人信息" width="1008px" >
      <Form :model="user" label-position="right" :label-width="100">
        <div class="wk1">
          <div class="img1 b_top_left">
            <!--              <img class="img2" :src="nophoto">-->
          </div>
          <div class="w90 b_top_left td1">姓名</div>
          <div class="w165 b_top_left ti">
            <!-- {{userInfo.name}} -->
            <input class="input1" v-model="userInfo.name" type="text "/>
          </div>
          <div class="w90 b_top_left td1">性别</div>
          <div class="w105 b_top_left ti">
            <!-- {{userInfo.sex}} -->
<!--            <input class="input1" v-model="userInfo.sex" type="text " />-->
            <select v-model="userInfo.sex" class="select1" style="width:90px;">
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
          <div class="w90 b_top_left td1">民族</div>
          <div class="w135 b_bottom ti">
            <!-- {{userInfo.folk}} -->
            <input class="input1" style="width: 90%;" v-model="userInfo.folk" type="text "  />
          </div>
          <div class="w90 b_bottom_right td1">身份证号</div>
          <div class="w165 b_bottom_right ti">
            <input class="input1" style="width: 90%;" v-model="userInfo.idcard" type="text " />
          </div>
          <div class="w90 b_top_left td1">房屋属性</div>
          <div class="w105 b_top_left ti">
            <select v-model="userInfo.house_condition" class="select1" style="width:90px;">
              <option value="自有">自有</option>
              <option value="租住">租住</option>
            </select>
          </div>
          <div class="w90 b_bottom_right td1">居住情况</div>
          <div class="w135 b_bottom ti">
            <select v-model="userInfo.living_condition" class="select1" style="width:115px;">
              <option value="自住">自住</option>
              <option value="租住">租住</option>
              <option value="借住">借住</option>
              <option value="其他">其他</option>
            </select>
          </div>
          <div class="w90 b_bottom_right td1">住址</div>
          <div class="w585 b_bottom ti">
            <!-- {{userInfo.address}} -->
            <input class="input1" v-model="userInfo.address" type="text " />
          </div>
          <div class="w90 b_bottom_right td1">户籍地址</div>
          <div class="w585 b_bottom ti"><input class="input1" v-model="userInfo.domicile_address" type="text " />
          </div>
          <div class="w135 b_bottom_right td1">手机号码</div>
          <div class="w190 b_bottom_right ti"><input class="input1" v-model="userInfo.tel" type="text " /></div>
          <div class="w105 b_bottom_right td1">现住地址</div>
          <div class="w395 b_bottom ti"><input class="input1" v-model="userInfo.present_address" type="text " />
          </div>
          <div class="w135 b_bottom_right td1">共同居住人员</div>
          <div class="w190 b_bottom_right ti">
            <select v-model="userInfo.co_resident" class="select1" style="width:170px;">
              <option value="父母">父母</option>
              <option value="配偶">配偶</option>
              <option value="亲属">亲属</option>
              <option value="其他">其他</option>
              <option value="无">无</option>
            </select>
          </div>
          <div class="w105 b_bottom_right td1">银行卡收入情况</div>
          <div class="w115 b_bottom_right ti">
            <select v-model="userInfo.personal_income" class="select1" style="width:85px;">
              <option value="5万以下">5万以下</option>
              <option value="5-10万">5-10万</option>
              <option value="10万以上">10万以上</option>
              <option value="保密">保密</option>
            </select>
          </div>
          <div class="w95 b_bottom_right td1">工作单位</div>
          <div class="w170 b_bottom ti"><input class="input1" v-model="userInfo.work_unit" type="text " /></div>
          <div class="w135 b_bottom_right td1">文化程度</div>
          <div class="w90 b_bottom_right ti">
            <select v-model="userInfo.education" class="select1" style="width:70px;">
              <option value="小学">小学</option>
              <option value="初中">初中</option>
              <option value="高中">高中</option>
              <option value="大学">大学</option>
              <option value="硕士研究生">硕士研究生</option>
              <option value="博士研究生">博士研究生</option>
              <option value="其他">其他</option>
            </select>
          </div>
          <div class="w100 b_bottom_right td1">婚姻状况</div>
          <div class="w65 b_bottom_right ti">
            <select v-model="userInfo.marriage" class="select1" style="width:55px;">
              <option value="未婚">未婚</option>
              <option value="已婚">已婚</option>
              <option value="离异">离异</option>
              <option value="丧偶">丧偶</option>
              <option value="再婚">再婚</option>
            </select></div>
          <div class="w80 b_bottom_right td1">生育子女</div>
          <div class="w75 b_bottom_right ti">
            <select v-model="userInfo.child" class="select1" style="width:65px;">
              <option value="无">无</option>
              <option value="1个">1个</option>
              <option value="2个">2个</option>
              <option value="3个以上">3个以上</option>
            </select>
          </div>
          <div class="w95 b_bottom_right td1">政治面貌</div>
          <div class="w170 b_bottom ti">
            <!-- v-model="userInfo.political_outlook"-->
            <select v-model="userInfo.political_outlook" class="select1" style="width:150px;">
              <option value="群众">群众</option>
              <option value="共产党员">共产党员</option>
              <option value="共产主义青年团团员">共产主义青年团团员</option>
              <option value="国民党革命委员会会员">国民党革命委员会会员</option>
              <option value="民主同盟盟员">民主同盟盟员</option>
              <option value="民主建国会会员">民主建国会会员</option>
              <option value="民主促进会会员">民主促进会会员</option>
              <option value="农工民主党党员">农工民主党党员</option>
              <option value="致公党党员">致公党党员</option>
              <option value="九三学社社员">九三学社社员</option>
              <option value="台湾民主自治同盟盟员">台湾民主自治同盟盟员</option>
              <option value="无党派民主人士">无党派民主人士</option>
            </select>
          </div>
          <div class="w135 b_bottom_right td1">兵役情况</div>
          <div class="w90 b_bottom_right ti">
            <select v-model="userInfo.military" class="select1" style="width:70px;">
              <option value="是">是</option>
              <option value="否">否</option>
            </select>
          </div>
          <div class="w100 b_bottom_right td1">职业</div>
          <div class="w220 b_bottom ti" style="width: 485px">
            <select v-model="userInfo.occupation" class="select1" style="width:465px;">
              <option value="国家机关,党群组织">国家机关,党群组织,企业</option>
              <option value="企业,事业单位负责人">企业,事业单位负责人</option>
              <option value="专业技术人员">专业技术人员</option>
              <option value=">办事人员和有关人员">办事人员和有关人员</option>
              <option value="商业,服务业人员">商业,服务业人员</option>
              <option value="农,林,牧,渔,水利业生产人员">农,林,牧,渔,水利业生产人员</option>
              <option value="生产,运输设备操作及有关人员">生产,运输设备操作及有关人员</option>
              <option value="军人">军人</option>
              <option value="退休">退休</option>
              <option value="学生">学生</option>
              <option value="学龄前">学龄前</option>
              <option value="其他从业人员">其他从业人员</option>
              <option value="无业人员">无业人员</option>
            </select>
          </div>
          <div class="w135 b_bottom_right td1">重点人群</div>
          <div class="w1701 ti" style="width: 675px">
            <select v-model="userInfo.zhongdian" class="select1" style="width:655px;">
              <option value="残疾人群">残疾人群</option>
              <option value="大众人群">大众人群</option>
            </select>
          </div>
          <div class="w135 b_bottom_right td1">小区</div>
          <div  class="w220 b_bottom_right ti">
            <select v-model="userInfo.qu" class="select1" style="width:200px;">
              <!--                <option :value="obj.id" v-for="obj in smallarealist" v-bind:key="obj.id">{{obj.title}}</option>-->
              <option value="西塔小区">西塔小区</option>
              <option value="恒大绿洲">恒大绿洲</option>
            </select>
          </div>
          <div  class="w100 b_bottom_right td1">组</div>
          <div class="w90 b_bottom_right ti">
            <select v-model="userInfo.zhu" class="select1" style="width:70px;">
              <!--                <option :value="obj.id" v-for="obj in grouplist" v-bind:key="obj.id">{{obj.title}}</option>-->
              <option value="2组">2组</option>
              <option value="3组">3组</option>
            </select>
          </div>
          <div class="w95 b_bottom_right td1">楼</div>
          <div class="w1701 ti">
            <select v-model="userInfo.lou" class="select1" style="width:150px;">
              <!--                <option :value="obj.id" v-for="obj in downlist" v-bind:key="obj.id">{{obj.title}}</option>-->
              <option value="4楼">4楼</option>
              <option value="5楼">5楼</option>
            </select>
          </div>
          <div class="w135 b_right td1">单元</div>
          <div  class="w220 b_right ti">
            <select v-model="userInfo.danyuan" class="select1" style="width:200px;">
              <!--   <option :value="obj.id" v-for="obj in unitlist" v-bind:key="obj.id">{{obj.title}}</option>-->
              <option value="6单元">6单元</option>
              <option value="7单元">7单元</option>
            </select>
          </div>
          <div  class="w100 b_right td1" >层</div>
          <div class="w90 b_right ti">
            <select v-model="userInfo.cheng" class="select1" style="width:70px;">
              <!--                <option :value="obj.id" v-for="obj in layerlist" v-bind:key="obj.id">{{obj.title}}</option>-->
              <option value="2层">2层</option>
              <option value="3层">3层</option>
            </select>
          </div>
          <div class="w95 b_right td1">户</div>
          <div class="w170 ti">
            <select v-model="userInfo.hu" class="select1" style="width:150px;">
              <!--   <option :value="obj.id" v-for="obj in householdlist" v-bind:key="obj.id">{{obj.title}}</option>-->
              <option value="2户">2户</option>
              <option value="3户">3户</option>
            </select>
          </div>
        </div>
        <br>
        <div class="div3">
          <P class="p1">备注：</P>
        </div>
        <br>
        <div class="div2">
          <textarea class="input3" v-model="userInfo.remarks" rows="5" />
        </div>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="ok">确定</Button>
        <Button style="margin-left: 8px" @click="closeModal">取消</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import './index.less'
export default {
  data () {
    return {
      modal2: false,
      data2: [],
      aa: '',
      bb: '',
      user: { show: false },
      columns4: [
        {
          title: '序号',
          key: 'xuhao',
          width: 65,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          width: 100,
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          width: 65,
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'idcard',
          width: 180,
          align: 'center'
        },
        {
          title: '电话',
          key: 'tel',
          width: 135,
          align: 'center'
        },
        {
          title: '工作单位',
          key: 'work_unit',
          width: 200,
          align: 'center'
        },
        {
          title: '学历',
          key: 'education',
          width: 95,
          align: 'center'
        },
        {
          title: '家庭住址',
          key: 'address',
          width: 230,
          align: 'center'
        },

        {
          title: '操作',
          slot: 'cz',
          minWidth: 80,
          align: 'center'
        }
      ],
      data1: [
        {
          xuhao: '1',
          name: '李俊辉',
          sex: '男',
          idcard: '211222188502548747',
          zhiwu: '书记',
          tel: '17640232587',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19',
          folk: '满',
          house_condition: '自有',
          living_condition: '自住',
          address: '辽宁省沈阳市和平区抚顺路54-3',
          domicile_address: '辽宁省沈阳市和平区',
          present_address: '辽宁省沈阳市和平区抚顺路54',
          co_resident: '父母',
          personal_income: '5万以下',
          work_unit: '沈阳铸造研所',
          education: '大学',
          marriage: '未婚',
          child: '无',
          political_outlook: '共产党员',
          military: '是',
          occupation: '军人',
          zhongdian: '大众人群',
          qu: '西塔小区',
          zhu: '2组',
          lou: '4楼',
          danyuan: '6单元',
          cheng: '2层',
          hu: '3户',
          remarks: '无备注'

          /* danwei: '沈阳铸造研所' */

        },
        {
          xuhao: '2',
          name: '王淑琴',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '主任助理',
          tel: '15898256321',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19',
          folk: '满',
          house_condition: '自有',
          living_condition: '自住',
          address: '辽宁省沈阳市和平区抚顺路54-3',
          domicile_address: '辽宁省沈阳市和平区',
          present_address: '辽宁省沈阳市和平区抚顺路54',
          co_resident: '父母',
          personal_income: '5万以下',
          work_unit: '沈阳铸造研所',
          education: '大学',
          marriage: '未婚',
          child: '无',
          political_outlook: '共产党员',
          military: '是',
          occupation: '军人',
          zhongdian: '大众人群',
          qu: '西塔小区',
          zhu: '2组',
          lou: '4楼',
          danyuan: '6单元',
          cheng: '2层',
          hu: '3户',
          remarks: '无备注'

        },
        {
          xuhao: '3',
          name: '刘新辉',
          sex: '男',
          idcard: '211222188502548747',
          zhiwu: '后备干部',
          tel: '17640258987',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19',
          folk: '满',
          house_condition: '自有',
          living_condition: '自住',
          address: '辽宁省沈阳市和平区抚顺路54-3',
          domicile_address: '辽宁省沈阳市和平区',
          present_address: '辽宁省沈阳市和平区抚顺路54',
          co_resident: '父母',
          personal_income: '5万以下',
          work_unit: '沈阳铸造研所',
          education: '大学',
          marriage: '未婚',
          child: '无',
          political_outlook: '共产党员',
          military: '是',
          occupation: '军人',
          zhongdian: '大众人群',
          qu: '西塔小区',
          zhu: '2组',
          lou: '4楼',
          danyuan: '6单元',
          cheng: '2层',
          hu: '3户',
          remarks: '无备注'

        },
        {
          xuhao: '4',
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '安全员',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19',
          folk: '满',
          house_condition: '自有',
          living_condition: '自住',
          address: '辽宁省沈阳市和平区抚顺路54-3',
          domicile_address: '辽宁省沈阳市和平区',
          present_address: '辽宁省沈阳市和平区抚顺路54',
          co_resident: '父母',
          personal_income: '5万以下',
          work_unit: '沈阳铸造研所',
          education: '大学',
          marriage: '未婚',
          child: '无',
          political_outlook: '共产党员',
          military: '是',
          occupation: '军人',
          zhongdian: '大众人群',
          qu: '西塔小区',
          zhu: '2组',
          lou: '4楼',
          danyuan: '6单元',
          cheng: '2层',
          hu: '3户',
          remarks: '无备注'

        },
        {
          xuhao: '5',
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '公益岗位',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19',
          folk: '满',
          house_condition: '自有',
          living_condition: '自住',
          address: '辽宁省沈阳市和平区抚顺路54-3',
          domicile_address: '辽宁省沈阳市和平区',
          present_address: '辽宁省沈阳市和平区抚顺路54',
          co_resident: '父母',
          personal_income: '5万以下',
          work_unit: '沈阳铸造研所',
          education: '大学',
          marriage: '未婚',
          child: '无',
          political_outlook: '共产党员',
          military: '是',
          occupation: '军人',
          zhongdian: '大众人群',
          qu: '西塔小区',
          zhu: '2组',
          lou: '4楼',
          danyuan: '6单元',
          cheng: '2层',
          hu: '3户',
          remarks: '无备注'

        },
        {
          xuhao: '6',
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '残联干事',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19',
          folk: '满',
          house_condition: '自有',
          living_condition: '自住',
          address: '辽宁省沈阳市和平区抚顺路54-3',
          domicile_address: '辽宁省沈阳市和平区',
          present_address: '辽宁省沈阳市和平区抚顺路54',
          co_resident: '父母',
          personal_income: '5万以下',
          work_unit: '沈阳铸造研所',
          education: '大学',
          marriage: '未婚',
          child: '无',
          political_outlook: '共产党员',
          military: '是',
          occupation: '军人',
          zhongdian: '大众人群',
          qu: '西塔小区',
          zhu: '2组',
          lou: '4楼',
          danyuan: '6单元',
          cheng: '2层',
          hu: '3户',
          remarks: '无备注'

        },
        {
          xuhao: '7',
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '残联干事',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19',
          folk: '满',
          house_condition: '自有',
          living_condition: '自住',
          address: '辽宁省沈阳市和平区抚顺路54-3',
          domicile_address: '辽宁省沈阳市和平区',
          present_address: '辽宁省沈阳市和平区抚顺路54',
          co_resident: '父母',
          personal_income: '5万以下',
          work_unit: '沈阳铸造研所',
          education: '大学',
          marriage: '未婚',
          child: '无',
          political_outlook: '共产党员',
          military: '是',
          occupation: '军人',
          zhongdian: '大众人群',
          qu: '西塔小区',
          zhu: '2组',
          lou: '4楼',
          danyuan: '6单元',
          cheng: '2层',
          hu: '3户',
          remarks: '无备注'

        },
        {
          xuhao: '8',
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '残联干事',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19',
          folk: '满',
          house_condition: '自有',
          living_condition: '自住',
          address: '辽宁省沈阳市和平区抚顺路54-3',
          domicile_address: '辽宁省沈阳市和平区',
          present_address: '辽宁省沈阳市和平区抚顺路54',
          co_resident: '父母',
          personal_income: '5万以下',
          work_unit: '沈阳铸造研所',
          education: '大学',
          marriage: '未婚',
          child: '无',
          political_outlook: '共产党员',
          military: '是',
          occupation: '军人',
          zhongdian: '大众人群',
          qu: '西塔小区',
          zhu: '2组',
          lou: '4楼',
          danyuan: '6单元',
          cheng: '2层',
          hu: '3户',
          remarks: '无备注'

        },
        {
          xuhao: '9',
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '残联干事',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          mianmao: '党员',
          date: '1990-01-19',
          folk: '满',
          house_condition: '自有',
          living_condition: '自住',
          address: '辽宁省沈阳市和平区抚顺路54-3',
          domicile_address: '辽宁省沈阳市和平区',
          present_address: '辽宁省沈阳市和平区抚顺路54',
          co_resident: '父母',
          personal_income: '5万以下',
          work_unit: '沈阳铸造研所',
          education: '大学',
          marriage: '未婚',
          child: '无',
          political_outlook: '共产党员',
          military: '是',
          occupation: '军人',
          zhongdian: '大众人群',
          qu: '西塔小区',
          zhu: '2组',
          lou: '4楼',
          danyuan: '6单元',
          cheng: '2层',
          hu: '3户',
          remarks: '无备注'

        },
        {
          xuhao: '10',
          name: '吴艳丽',
          sex: '女',
          idcard: '211222188502548747',
          zhiwu: '残联干事',
          tel: '17640232031',
          xueli: '大专',
          zhuanye: '机械制造与自动化',
          old: '60',
          /* mianmao: '党员', */
          date: '1990-01-19',
          folk: '满',
          house_condition: '自有',
          living_condition: '自住',
          address: '辽宁省沈阳市和平区抚顺路54-3',
          domicile_address: '辽宁省沈阳市和平区',
          present_address: '辽宁省沈阳市和平区抚顺路54',
          co_resident: '父母',
          personal_income: '5万以下',
          work_unit: '沈阳铸造研所',
          education: '大学',
          marriage: '未婚',
          child: '无',
          political_outlook: '共产党员',
          military: '是',
          occupation: '军人',
          zhongdian: '大众人群',
          qu: '西塔小区',
          zhu: '2组',
          lou: '4楼',
          danyuan: '6单元',
          cheng: '2层',
          hu: '3户',
          remarks: '无备注'

        }
      ],
      userInfo: {
        xuhao: '',
        xueli: '',
        name: '',
        sex: '',
        folk: '',
        idcard: '',
        house_condition: '',
        living_condition: '',
        address: '',
        domicile_address: '',
        tel: '',
        present_address: '',
        co_resident: '',
        personal_income: '',
        work_unit: '',
        education: '',
        marriage: '',
        child: '',
        political_outlook: '',
        military: '',
        occupation: '',
        zhongdian: '',
        qu: '',
        zhu: '',
        lou: '',
        danyuan: '',
        cheng: '',
        hu: '',
        remarks: ''
      }

    }
  },
  methods: {
    show (row) {
      this.userInfo = row
      this.user.show = true
    },
    ok2 () {
      this.user.show = false
    },
    tianjia () {
      // this.obj.xuhao = '11'
      this.userInfo = {}
      this.modal2 = true
    },
    ok () {
      this.userInfo.xuhao = this.data2.length
      this.userInfo.xuhao++
      this.data2.push(this.userInfo)
      this.modal2 = false
      this.$Message.success('添加成功')
    },
    closeModal () {
      this.modal2 = false
    },
    chaxun () {
      //  支持模糊查询
      this.data2 = []
      let search = this.aa
      let search2 = this.bb
      let newListData = [] //  用于存放搜索出来数据的新数组
      if (search && search2) {
        this.data1.filter(item => {
          if (item.name.indexOf(search) !== -1 && item.idcard.indexOf(search2) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search) {
        this.data1.filter(item => {
          if (item.name.indexOf(search) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search2) {
        this.data1.filter(item => {
          if (item.idcard.indexOf(search2) !== -1) {
            newListData.push(item)
          }
        })
      } else {
        this.data2 = this.data1
      }
      newListData.filter(item => {
        this.data2.push(item)
      })
      // console.log(newListData)
    }

  },
  mounted () {
    this.data2 = this.data1
    // this.obj.xuhao = '11'
  }
}
</script>

<style scoped>
  .page-header{
    margin-left: 5%;
  }
  .div2 {
    margin-top: 20px;
  }

  .fenye {
    margin-top: 20px;
    display: flex;
    flex-direction: row-reverse;
  }
</style>
